var dialogEX = require(path.join(__dirname, '_dialog.js')); //弹出框
var form = require(path.join(__dirname, 'form.js'));

var checkText = function (text) {
    var data = [];
    text = text.replace(/\n/g, '').replace(/\/\/ /g, '').replace(/    /g, '').split(';');
    for (let i = 0; i < text.length; i++) {
        let item = text[i];
        if (item) {
            item = item.split('private ');
            var _data = {
                annotate: item[0],
                key: item[1].split(' ')[1],
                type: item[1].split(' ')[0]
            };
            data.push(_data);
        };
    };
    return data;
};

var item = function (data, parent, isChoose) {
    this.data = data;
    this.parent = parent;
    this.html = $(`
        <div class="modalItem">
            <div class="modalTitleBox">
                <div class="TitleBox">
                    <span class="modalTitle">`+ data.key + `</span>
                    <span class="modalName">`+ data.name + `</span>
                </div>
                <i class="TitleIcon fa fa-angle-down"></i>
            </div>
            <div class="modalBodyBox" style="display:none">
                <div class="modalBody"></div>
                <div class="modalEditor delete"><i class="fa fa-times"></i> 删除</div>
                <div class="modalEditor edit"><i class="fa fa-edit"></i> 修改</div>
                <div style="clear:both"></div>
            </div>
        </div>
    `);
    this.key = this.html.find('.modalTitle');
    this.name = this.html.find('.modalName');
    this.body = this.html.find('.modalBody');
    this.renderData(data.data);
    this.bodyBox = this.html.find('.modalBodyBox');
    this.editor = this.html.find('.edit');
    this.delete = this.html.find('.delete');
    if (!isChoose) {

        this.editor.click(() => {
            var body = form.form([{
                key: 'key',
                type: 'input',
                boxSetting: {
                    lable: '类名 ： ',
                    size: 'block',
                    className: '',
                },
                elementSetting: {
                    size: 'block',
                    default: this.data.key,
                    jude: {
                        name: '类名',
                        rules: ['notNull']
                    },
                },
            }, {
                key: 'name',
                type: 'input',
                boxSetting: {
                    lable: '备注名 ： ',
                    size: 'block',
                    className: '',
                },
                elementSetting: {
                    size: 'block',
                    default: this.data.name,
                    jude: {
                        name: '备注名',
                        rules: ['notNull']
                    },
                },
            }, {
                key: 'text',
                type: 'textarea',
                boxSetting: {
                    lable: '内容 ： ',
                    size: 'block',
                    className: '',
                },
                elementSetting: {
                    size: 'block',
                    default: this.data.text,
                    jude: {
                        name: '内容',
                        rules: ['notNull']
                    },
                },
            }]);
            body.set(this.data);
            var _dialog = dialogEX({
                width: 800,
                height: 600,
                title: '修改模型',
                body: body.html,
                className: 'modalEditorDialog',
                buttons: [
                    {
                        className: 'editorFormButton',
                        event: () => {
                            var data = body.get();
                            if (data) {
                                data.data = checkText(data.text);
                                this.parent.event.updata(this.data.id, data, (docs) => {
                                    this.reSet(data);
                                    _dialog.close();
                                });
                            };
                        },
                        text: '修改'
                    }
                ]
            });
        });
        this.delete.click(() => {
            dialogEX({
                title: '警告',
                body: '<div style="padding:20px;">是否删除Modal : ' + this.data.key + ' ？</div>',
                buttons: [{
                    text: '确定',
                    event: (event) => {
                        this.parent.delete(this.data.id, this.data.key);
                        event.close();
                    },
                }, {
                    text: '取消',
                    event: (event) => {
                        event.close();
                    },
                }],
                width: 400,
                height: 200,
            });
        });
    } else {
        this.editor.css('display', 'none');
        this.delete.css('display', 'none');
        this.isChooseButton = $('<div class="modalEditor choose"><i class="fa fa-edit"></i> 选择</div>').click(() => {
            this.active();
        });

        this.body.after(this.isChooseButton);


    };
    this.html.title = this.html.find('.modalTitleBox').click(() => {
        var style = this.bodyBox.css('display');
        if (style == 'none') {
            this.bodyBox.css('display', 'block');
        } else {
            this.bodyBox.css('display', 'none');
        }
    });
};

item.prototype.renderData = function (data) {
    this.body.empty();
    var title = $(`
        <div class="line title">
            <div class="line_item">key</div>
            <div class="line_item">type</div>
            <div class="line_item">备注</div>
        </div>
    `);
    this.body.append(title);
    for (let i = 0; i < data.length; i++) {
        const element = data[i];
        this.body.append(`
            <div class="line">
                <div class="line_item">`+ element.key + `</div>
                <div class="line_item">`+ element.type.replace('<', '&lt;') + `</div>
                <div class="line_item">`+ element.annotate + `</div>
            </div>
        `);
    };
    this.body.append('<div style="clear:both"></div>');

};

item.prototype.reSet = function (data) {
    this.key.text(data.key);
    this.name.text(data.name);
    this.renderData(data.data);
};

item.prototype.active = function () {
    this.parent(this);
    this.html.css('background', '#ddffe9');
};
item.prototype.unActive = function () {
    this.html.css('background', '#fff');
};

var modal = function () {
    this.item = {};
    this.html = $('<div class="modal" style="display:none"></div>');
    this.event = {
        get: function () { },
        creat: function () { },
        updata: function () { },
        delete: function () { },
    };
    this.addModalButton = $('<div class="addModalButton">添加</div>').click(() => {
        var body = form.form([{
            key: 'key',
            type: 'input',
            boxSetting: {
                lable: '类名 ： ',
                size: 'block',
                className: '',
            },
            elementSetting: {
                size: 'block',
                jude: {
                    name: '类名',
                    rules: ['notNull']
                },
            },
        }, {
            key: 'name',
            type: 'input',
            boxSetting: {
                lable: '备注名 ： ',
                size: 'block',
                className: '',
            },
            elementSetting: {
                size: 'block',
                jude: {
                    name: '备注名',
                    rules: ['notNull']
                },
            },
        }, {
            key: 'text',
            type: 'textarea',
            boxSetting: {
                lable: '内容 ： ',
                size: 'block',
                className: '',
            },
            elementSetting: {
                size: 'block',
                jude: {
                    name: '内容',
                    rules: ['notNull']
                },
            },
        }]);
        var _dialog = dialogEX({
            width: 800,
            height: 600,
            title: '修改模型',
            body: body.html,
            className: 'modalEditorDialog',
            buttons: [
                {
                    className: 'editorFormButton',
                    event: () => {
                        var data = body.get();
                        if (data) {
                            data.data = checkText(data.text);
                            this.event.creat(data, (doc) => {
                                this.creatEvent(doc);
                            });
                            _dialog.close();
                        };
                    },
                    text: '添加'
                }
            ]
        });
    });
    this.search = $(`
        <div class="modalSearchBox">
            <input class="searchInpur" placeholder="请输入类名进行搜索"></input>
        </div>
    `);

    this.input = this.search.find('input');

    this.input.keypress((e) => {
        if (e.which == 13) {
            this.searchEvent(this.input.val());
        }
    });
    this.refresh = $('<div class="modalRefresh"><i class="fa fa-refresh"></i></div>').click(() => {
        this.event.get((docs) => {
            this.setData(docs);
            this.input.val('');
        });
    });
    this.modalBox = $('<div class="modalBox"></div>');
    this.html.append(this.search).append(this.refresh).append(this.addModalButton).append(this.modalBox);
};

modal.prototype.show = function () {
    this.event.get((docs) => {
        this.setData(docs);
    });
    this.html.css({ display: 'block' });
};
modal.prototype.creatEvent = function (items) {
    this.item[items.key] = new item(items, this);
    this.modalBox.prepend(this.item[items.key].html);
};
modal.prototype.hide = function () {
    this.html.css({ display: 'none' });
};
modal.prototype.render = function () {
    return this.html;
};
modal.prototype.setData = function (data) {
    this.data = {};
    this.modalBox.empty();
    for (let i = 0; i < data.length; i++) {
        const items = data[i];
        this.item[items.key] = new item(items, this);
        this.modalBox.append(this.item[items.key].html);
    };
};
modal.prototype.delete = function (id, key) {
    this.event.delete(id, (doc) => {
        if (this.item.hasOwnProperty(key)) {
            const _item = this.item[key];
            _item.html.remove();
            delete this.item[key];
        }
    });
};
modal.prototype.on = function (str, event) {
    if (this.event.hasOwnProperty(str)) {
        this.event[str] = event;
    };
};
modal.prototype.searchEvent = function (str) {
    for (const key in this.item) {
        if (this.item.hasOwnProperty(key)) {
            const item = this.item[key];
            item.bodyBox.css('display', 'none');
            if (str) {
                if (key.indexOf(str) >= 0) {
                    item.html.css('display', 'block');
                } else {
                    item.html.css('display', 'none');
                };
            } else {
                item.html.css('display', 'block');
            };
        }
    }
};


module.exports = {
    modal: function () {
        return new modal();
    },
    item: function (data, parent, isChoose) {
        return new item(data, parent, isChoose);
    },
};